<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>前端知识体系大全 | 宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="HTMLHTML指超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML标记标签通常被称为 HTML 标签 (HTML tag) html4 文本段落p,h1,h2,h3,blockquote,span,div，img 列表ol,ul,li,dl,dt,dd 内容元素strong,del,dfn,em,a,abbr,acrony">
<meta name="keywords" content="前端 Javascript css ES6">
<meta property="og:type" content="article">
<meta property="og:title" content="前端知识体系大全">
<meta property="og:url" content="http://ikkkr.com/2018/06/06/前端知识体系大全/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="HTMLHTML指超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML标记标签通常被称为 HTML 标签 (HTML tag) html4 文本段落p,h1,h2,h3,blockquote,span,div，img 列表ol,ul,li,dl,dt,dd 内容元素strong,del,dfn,em,a,abbr,acrony">
<meta property="og:locale" content="default">
<meta property="og:updated_time" content="2018-07-23T10:15:33.170Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端知识体系大全">
<meta name="twitter:description" content="HTMLHTML指超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML标记标签通常被称为 HTML 标签 (HTML tag) html4 文本段落p,h1,h2,h3,blockquote,span,div，img 列表ol,ul,li,dl,dt,dd 内容元素strong,del,dfn,em,a,abbr,acrony">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-前端知识体系大全" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2018/06/06/前端知识体系大全/" class="article-date">
  <time datetime="2018-06-06T14:43:29.000Z" itemprop="datePublished">2018-06-06</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      前端知识体系大全
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h2><p>HTML指超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。<br>HTML标记标签通常被称为 HTML 标签 (HTML tag)</p>
<h3 id="html4"><a href="#html4" class="headerlink" title="html4"></a>html4</h3><ul>
<li>文本段落<br>p,h1,h2,h3,blockquote,span,div，img</li>
<li>列表<br>ol,ul,li,dl,dt,dd</li>
<li>内容元素<br>strong,del,dfn,em,a,abbr,acronym，address，pre，code，tt</li>
<li>表格<br>table,caption,thead,tfoot,tbody,th，tr, td,colgroup</li>
<li>表单<br>form,input（radio，checkbox，hidden,password,text）,textarea,select</li>
<li>按钮<br>button,input(button)</li>
<li>其他<br>label,html,body,area,b,br</li>
</ul>
<h3 id="html5"><a href="#html5" class="headerlink" title="html5"></a>html5</h3><h4 id="语义特性（Class：Semantic）"><a href="#语义特性（Class：Semantic）" class="headerlink" title="语义特性（Class：Semantic）"></a>语义特性（Class：Semantic）</h4><p>HTML5赋予网页更好的意义和结构。更加丰富的标签。<br>article,aside,audio,bdi,canvas,command,datalist,details,embed,figcaption,figure,footer,<br>header,hgroup,keygen,mark,meter,nav,output,progress,rp,rt,ruby,section,source,summary,time,track,video</p>
<h4 id="本地存储特性（Class-OFFLINE-STORAGE）"><a href="#本地存储特性（Class-OFFLINE-STORAGE）" class="headerlink" title="本地存储特性（Class: OFFLINE STORAGE）"></a>本地存储特性（Class: OFFLINE STORAGE）</h4><ul>
<li>localStorage - 没有时间限制的数据存储</li>
<li>sessionStorage - 针对一个 session 的数据存储</li>
<li>Indexed DB<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">用法：.setItem( key, value)</span><br><span class="line">sessionStorage.setItem(<span class="string">"key"</span>, <span class="string">"value"</span>); </span><br><span class="line">localStorage.setItem(<span class="string">"site"</span>, <span class="string">"js8.in"</span>);</span><br><span class="line"></span><br><span class="line">getItem获取value用途：获取指定key本地存储的值</span><br><span class="line">用法：.getItem(key)</span><br><span class="line"><span class="keyword">var</span> value = sessionStorage.getItem(<span class="string">"key"</span>); </span><br><span class="line"><span class="keyword">var</span> site = localStorage.getItem(<span class="string">"site"</span>);</span><br><span class="line"></span><br><span class="line">removeItem删除key用途：删除指定key本地存储的值</span><br><span class="line">用法：.removeItem(key)</span><br><span class="line">sessionStorage.removeItem(<span class="string">"key"</span>);</span><br><span class="line">localStorage.removeItem(<span class="string">"site"</span>);</span><br><span class="line"></span><br><span class="line">clear清除所有的key/value用途：清除所有的key/value</span><br><span class="line">用法：.clear()</span><br><span class="line">sessionStorage.clear(); </span><br><span class="line">localStorage.clear();</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="设备访问特性-Class-DEVICE-ACCESS"><a href="#设备访问特性-Class-DEVICE-ACCESS" class="headerlink" title="设备访问特性 (Class: DEVICE ACCESS)"></a>设备访问特性 (Class: DEVICE ACCESS)</h4><p>Geolocation<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getLocation</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (navigator.geolocation) &#123;</span><br><span class="line">        <span class="keyword">var</span> options = &#123;</span><br><span class="line">            enableHighAccuracy: <span class="literal">true</span>,</span><br><span class="line">            timeout: <span class="number">5000</span>,</span><br><span class="line">            maximumAge: <span class="number">0</span></span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">success</span>(<span class="params">pos</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> crd = pos.coords;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'Your current position is:'</span>);</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">`Latitude : <span class="subst">$&#123;crd.latitude&#125;</span>`</span>);</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">`Longitude: <span class="subst">$&#123;crd.longitude&#125;</span>`</span>);</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">`More or less <span class="subst">$&#123;crd.accuracy&#125;</span> meters.`</span>);</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">error</span>(<span class="params">err</span>) </span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(err.message);</span><br><span class="line">        &#125;;</span><br><span class="line"></span><br><span class="line">        navigator.geolocation.getCurrentPosition(success, error, options);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"Geolocation is not supported by this browser."</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">getLocation();</span><br></pre></td></tr></table></figure></p>
<h4 id="连接特性（Class-CONNECTIVITY）"><a href="#连接特性（Class-CONNECTIVITY）" class="headerlink" title="连接特性（Class: CONNECTIVITY）"></a>连接特性（Class: CONNECTIVITY）</h4><ul>
<li>Server-Sent Event</li>
<li>WebSockets<br>Server-Sent Event 即服务器单向消息传递事件，网页可以自动获取来自服务器的更新。<br>WebSocket 是伴随HTML5发布的一种新协议。它实现了浏览器与服务器全双工通信(full-duplex)，可以传输基于消息的文本和二进制数据。WebSocket 是浏览器中最靠近套接字的API，除最初建立连接时需要借助于现有的HTTP协议，其他时候直接基于TCP完成通信。</li>
</ul>
<h4 id="网页多媒体特性-Class-MULTIMEDIA"><a href="#网页多媒体特性-Class-MULTIMEDIA" class="headerlink" title="网页多媒体特性(Class: MULTIMEDIA)"></a>网页多媒体特性(Class: MULTIMEDIA)</h4><ul>
<li>Audio</li>
<li>Video</li>
</ul>
<h4 id="三维、图形及特效特性（Class-3D-Graphics-amp-Effects）"><a href="#三维、图形及特效特性（Class-3D-Graphics-amp-Effects）" class="headerlink" title="三维、图形及特效特性（Class: 3D, Graphics &amp; Effects）"></a>三维、图形及特效特性（Class: 3D, Graphics &amp; Effects）</h4><ul>
<li>SVG</li>
<li>Canvas</li>
<li>WebGL</li>
<li>CSS3的3D</li>
<li>SVG动画制作: <a href="http://snapsvg.io" target="_blank" rel="noopener">http://snapsvg.io</a></li>
<li>SVG数据可视化框架: <a href="https://d3js.org" target="_blank" rel="noopener">https://d3js.org</a></li>
<li>Canvas引擎：egret , cocos2D-js , lufylegend.js ,echarts等</li>
<li>WebGL 框架: threejs , Babylon.js等</li>
<li>CSS3 3D: <a href="http://rainzhai.github.io/raincss/css3/cube.html" target="_blank" rel="noopener">http://rainzhai.github.io/raincss/css3/cube.html</a></li>
</ul>
<h4 id="性能与集成特性（Class-Performance-amp-Integration）"><a href="#性能与集成特性（Class-Performance-amp-Integration）" class="headerlink" title="性能与集成特性（Class: Performance &amp; Integration）"></a>性能与集成特性（Class: Performance &amp; Integration）</h4><ul>
<li>XMLHttpRequest2</li>
</ul>
<a id="more"></a>
<h4 id="CSS3特性-Class-CSS3"><a href="#CSS3特性-Class-CSS3" class="headerlink" title="CSS3特性(Class: CSS3)"></a>CSS3特性(Class: CSS3)</h4><p>在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。</p>
<ul>
<li><p>边框</p>
<ul>
<li>border-radius</li>
<li>box-shadow</li>
<li>border-image</li>
</ul>
</li>
<li><p>背景(多重背景)</p>
<ul>
<li>background-size</li>
<li>background-origin 背景定位</li>
<li>background-clip 背景裁剪</li>
</ul>
</li>
<li><p>文本效果</p>
<ul>
<li>text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行</li>
<li>text-emphasis 应用重点标记以及重点标记的前景色</li>
<li>text-justify “justify” 时所使用的对齐方法</li>
<li>text-outline 文本的轮廓</li>
<li>text-overflow 文本溢出包含元素时发生的事情</li>
<li>text-shadow</li>
<li>text-wrap 文本的换行规则</li>
<li>word-break 非中日韩文本的换行规则</li>
<li>word-wrap 长的不可分割的单词进行分割并换行到下一行</li>
</ul>
</li>
<li><p>webfont<br>@font-face{<br>font-family: myFirstFont;<br>src: url(‘Sansation_Light.ttf’),<br>url(‘Sansation_Light.eot’); /<em> IE9+ </em>/<br>}</p>
</li>
<li><p>2D 转换</p>
<ul>
<li>transform</li>
<li>translate(x,y) 移动</li>
<li>rotate(x,y) 转动</li>
<li>scale(x,y) 缩放</li>
<li>skew(x,y) 倾斜</li>
<li>matrix() 矩阵</li>
</ul>
</li>
<li><p>3D转换</p>
<ul>
<li>rotate3d(x,y,z,angle)</li>
<li>translate3d(x,y,z)</li>
<li>-scale3d(x,y,z)</li>
</ul>
</li>
<li><p>过渡</p>
<ul>
<li>transition</li>
</ul>
</li>
<li><p>动画</p>
<ul>
<li>@Keyframes</li>
<li>animation</li>
</ul>
</li>
<li><p>多列</p>
<ul>
<li>column-count</li>
<li>column-gap</li>
<li>column-rule</li>
</ul>
</li>
<li><p>界面</p>
<ul>
<li>resize</li>
<li>box-sizing</li>
<li>outline-offset</li>
</ul>
</li>
<li><p>颜色</p>
<ul>
<li>RGBA</li>
<li>HSL</li>
<li>HSLA</li>
</ul>
</li>
<li><p>flex布局<br>Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。<br>采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。</p>
<ul>
<li>容器的属性<ul>
<li>flex-direction 决定主轴的方向</li>
<li>flex-wrap 如果一条轴线排不下，如何换行</li>
<li>flex-flow flex-direction属性和flex-wrap属性的简写形式</li>
<li>justify-content 项目在主轴上的对齐方式</li>
<li>align-items在交叉轴上如何对齐</li>
<li>align-content多根轴线的对齐方式</li>
</ul>
</li>
<li>项目的属性<ul>
<li>order排列顺序</li>
<li>flex-grow项目的放大比例</li>
<li>flex-shrink项目的缩小比例</li>
<li>flex-basis分配多余空间之前，项目占据的主轴空间</li>
<li>flex flex-grow, flex-shrink 和 flex-basis的简写</li>
<li>align-self 单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性</li>
</ul>
</li>
</ul>
</li>
<li><p>media query</p>
</li>
</ul>
<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><h3 id="CSS2"><a href="#CSS2" class="headerlink" title="CSS2"></a>CSS2</h3><ul>
<li>style<br>一个样式实际上有两个部分组成，要进行设置的网页元素（选择器）和格式化指令(声明块)。</li>
<li>ID选择器与类<br>id选择器，我们从另一个方面思考，它和数据库表里面的主键是同一个作用，唯一标示，所以id是唯一的.<br>对于class我们可以联想到java中的类，对于同样的功能，我们使用或继承同一个类就可以了，不需要编写新的类，css中的class也是如此，同样的样式用同一个class实现。</li>
<li><p>伪类和伪元素</p>
<ul>
<li>a：link 未使用的链接（a）</li>
<li>：visted 已经点击过的链接</li>
<li>a：hover 鼠标滑过时改变链接的效果</li>
<li>a：active 点击时展示链接效果</li>
</ul>
</li>
<li><p>DIV 和SPAN<br>我们使用div对页面进行分割，使用span包含某一两个文字或者一段话。事实上，div实现了页面的布局，它来主持着页面的全局，而span对其中各个细微的地方进行修饰。</p>
</li>
<li><p>HTML族谱</p>
<ul>
<li>祖先：一个标签A包含了另一个标签B，那么A是B的祖先，html标签是所有标签的祖先。</li>
<li>派生：在一个或是更多标签内部的标签就是一个派生标签，图中body是html派生标签。</li>
<li>父标签：一个父标签是另一个标签最近的祖先，html是head和body标签的父标签。</li>
<li>子标签：一个直接被另一个标签包围的标签就是子标签,h1和p是body的子标签。</li>
<li>同胞标签：head和body，还有h1和p。</li>
</ul>
</li>
<li><p>Margin、Padding and Border</p>
<ul>
<li>Padding 指的是内容和内容边距之间的空间</li>
<li>Border指的是在方框每一边上的直线</li>
<li>Margin指的是一个标签和另一个标签间的间隔</li>
</ul>
</li>
</ul>
<h2 id="相关概念"><a href="#相关概念" class="headerlink" title="相关概念:"></a>相关概念:</h2><ul>
<li>css渲染，重绘repaint，重排reflow，组合.<br>下面情况会导致reflow发生<ul>
<li>1：改变窗口大小</li>
<li>2：改变文字大小</li>
<li>3：内容的改变，如用户在输入框中敲字</li>
<li>4：激活伪类，如:hover</li>
<li>5：操作class属性</li>
<li>6：脚本操作DOM</li>
<li>7：计算offsetWidth和offsetHeight</li>
<li>8：设置style属性</li>
</ul>
</li>
<li>盒模型</li>
<li>块级元素</li>
<li>行内元素</li>
<li>定位方案</li>
<li>普通流 (normal flow)</li>
<li>浮动 (float)</li>
<li>绝对定位 (absolute positioning)</li>
</ul>
<h2 id="BFC-概念"><a href="#BFC-概念" class="headerlink" title="BFC 概念"></a>BFC 概念</h2><p>Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。</p>
<p>BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。</p>
<p>具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。</p>
<h3 id="触发-BFC"><a href="#触发-BFC" class="headerlink" title="触发 BFC"></a>触发 BFC</h3><p>只要元素满足下面任一条件即可触发 BFC 特性：</p>
<ul>
<li>body 根元素</li>
<li>浮动元素：float 除 none 以外的值</li>
<li>绝对定位元素：position (absolute、fixed)</li>
<li>display 为 inline-block、table-cells、flex</li>
<li>overflow 除了 visible 以外的值 (hidden、auto、scroll)</li>
</ul>
<h3 id="CSS3"><a href="#CSS3" class="headerlink" title="CSS3"></a>CSS3</h3><p>见html5 css3部分</p>
<h2 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h2><ul>
<li>javascript基础</li>
<li>ES3</li>
<li>ES5</li>
<li>ES6</li>
</ul>
<h3 id="javascript基础"><a href="#javascript基础" class="headerlink" title="javascript基础"></a>javascript基础</h3><h4 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h4><ul>
<li><p>变量</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//弱类型</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line">b = <span class="number">1</span>;</span><br><span class="line"><span class="comment">//直接量声明</span></span><br><span class="line">v = <span class="literal">undefined</span> <span class="comment">//无包装对象</span></span><br><span class="line">v = <span class="string">'...'</span><span class="comment">//包装对象String</span></span><br><span class="line">v = <span class="string">"..."</span><span class="comment">//包装对象String</span></span><br><span class="line">v = <span class="number">2132</span><span class="comment">//包装对象Number, 0x开头16进值数，0开头八进制数</span></span><br><span class="line">v = <span class="literal">true</span><span class="comment">//包装对象Boolean</span></span><br><span class="line">v = <span class="literal">false</span><span class="comment">//包装对象Boolean</span></span><br><span class="line">v = <span class="literal">null</span><span class="comment">//包装对象无</span></span><br><span class="line">v = &#123;&#125;<span class="comment">//包装对象Object</span></span><br><span class="line">v = []<span class="comment">//包装对象Array</span></span><br><span class="line">v = <span class="regexp">/../</span> <span class="comment">//包装对象RegExp</span></span><br><span class="line">v = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125; <span class="comment">//包装对象Function</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>函数声明</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//具名函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="comment">//匿名函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="comment">//函数表达式</span></span><br><span class="line"><span class="keyword">var</span> a =  <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="comment">//Function构造函数 </span></span><br><span class="line"><span class="keyword">var</span> sum = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">"num1"</span>,<span class="string">"num2"</span>,<span class="string">"return num1+num2"</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>运算符</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//+,-,*,/</span></span><br></pre></td></tr></table></figure>
<ul>
<li>连续赋值运算</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//连续赋值从右至左</span></span><br><span class="line"><span class="comment">//a.x不能被赋值</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">n</span>:<span class="number">1</span>&#125;; </span><br><span class="line">a.x = a = &#123;<span class="attr">n</span>:<span class="number">2</span>&#125;;  </span><br><span class="line">alert(a.x); <span class="comment">// --&gt; undefined  </span></span><br><span class="line"></span><br><span class="line"><span class="comment">//a.n不能被赋值</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">n</span>:<span class="number">1</span>&#125;;  </span><br><span class="line">a.n = a = &#123;<span class="attr">n</span>:<span class="number">2</span>&#125;;  </span><br><span class="line">alert(a.n); <span class="comment">// --&gt; 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//a[0]不能被赋值,说明连续赋值中，若最左的变量为其右边某对象的属性，或数组记录，则不进行赋值运算</span></span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">0</span>,<span class="number">1</span>];  </span><br><span class="line">a[<span class="number">0</span>] = a = [<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>]; </span><br><span class="line">alert(a[<span class="number">0</span>]);<span class="comment">// --&gt; 4</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//JavaScript运算符的类型转换</span></span><br><span class="line"><span class="comment">//加运算从左至右会把字符串 **左边相邻的和右边所有的**的运算元转换为字符串</span></span><br><span class="line"><span class="string">"1"</span>+<span class="number">2</span><span class="comment">//-&gt;"12"</span></span><br><span class="line"><span class="string">"1"</span>+<span class="number">2</span>+<span class="number">3</span><span class="comment">//-&gt;"123"</span></span><br><span class="line"><span class="number">1</span>+<span class="string">"2"</span><span class="comment">//-&gt;"12"</span></span><br><span class="line"><span class="number">1</span>+<span class="number">1</span>+<span class="string">"2"</span><span class="comment">//-&gt;"22"</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//乘除的规则和减一样，会把**运算符左右的运算元转换为数字**</span></span><br><span class="line"><span class="string">"1"</span>-<span class="string">"2"</span><span class="comment">//-&gt;-1</span></span><br><span class="line"><span class="string">"1"</span>-<span class="string">"1"</span>-<span class="string">"2"</span><span class="comment">//-&gt;-2</span></span><br><span class="line"><span class="number">1</span>-<span class="string">"2"</span><span class="comment">//-&gt;-1</span></span><br><span class="line"><span class="string">"1"</span><span class="number">-2</span><span class="comment">//-&gt;-1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//引擎检查valueOf() 返回值类型，然后调用toString() 转化为字符串</span></span><br><span class="line">&#123;&#125;+&#123;&#125; <span class="comment">//-&gt; "[object Object][object Object]"</span></span><br><span class="line">&#123;&#125;-&#123;&#125; <span class="comment">//-&gt; NaN(乘除结果一样)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//引擎检查valueOf() 返回值类型，然后调用toString() 转化为字符串</span></span><br><span class="line">[<span class="number">1</span>]+[<span class="number">2</span>] <span class="comment">//-&gt; "12" </span></span><br><span class="line">[<span class="number">1</span>]-[<span class="number">2</span>] <span class="comment">//-&gt; -1 (乘除规则和减一样)</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>]+[<span class="number">2</span>] <span class="comment">//-&gt;"1,22"</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>]-[<span class="number">2</span>]<span class="comment">//-&gt;NaN</span></span><br></pre></td></tr></table></figure>
<ul>
<li>比较</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//==  判断值</span></span><br><span class="line"><span class="comment">//==＝  判断值和类型</span></span><br><span class="line"><span class="comment">//!=  不等于</span></span><br><span class="line"><span class="comment">//&gt;  大于</span></span><br><span class="line"><span class="comment">//&lt;  大于</span></span><br><span class="line"><span class="comment">//&gt;=  大于等于</span></span><br><span class="line"><span class="comment">//&lt;=  大于等于</span></span><br></pre></td></tr></table></figure>
<ul>
<li>条件判断</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(a)&#123;</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">switch</span> (day)&#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">    <span class="comment">//...</span></span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>循环</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//for - 循环代码块一定的次数</span></span><br><span class="line"><span class="comment">//for/in - 循环遍历对象及原型的属性</span></span><br><span class="line"><span class="comment">//break 语句用于跳出循环。</span></span><br><span class="line"><span class="comment">//continue 用于跳过循环中的一个迭代。</span></span><br><span class="line"><span class="comment">//while - 当指定的条件为 true 时循环指定的代码块</span></span><br><span class="line"><span class="comment">//do/while - 同样当指定的条件为 true 时循环指定的代码块</span></span><br></pre></td></tr></table></figure>
<h4 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h4><ul>
<li>基本类型: undefined、null、boolean、number、string、objcet、function</li>
<li>栈：原始数据类型（Undefined，Null，Boolean，Number、String）es6的Symbol</li>
<li><p>堆：引用数据类型（对象Object、数组Array和函数Function）</p>
</li>
<li><p>两种类型的区别是：存储位置不同；</p>
</li>
<li>原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；</li>
<li>引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体</li>
<li>null，undefined 的区别</li>
<li>null 表示一个对象是“没有值”的值，也就是值为“空”；</li>
<li>undefined 表示一个变量声明了没有初始化(赋值)；</li>
<li>undefined不是一个有效的JSON，而null是；</li>
<li>undefined的类型(typeof)是undefined；</li>
<li>null的类型(typeof)是object；</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">null</span> == <span class="literal">undefined</span> <span class="comment">// true</span></span><br><span class="line"><span class="literal">null</span> === <span class="literal">undefined</span> <span class="comment">// false</span></span><br></pre></td></tr></table></figure>
<h4 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h4><pre><code>* 广义：在内存上一段有意义的区域，称作为一个对象。
* 在显式支持面向对象的语言中，“对象”一般是指类在内存中装载的实例，具有相关的成员变量和成员函数
* 在 JavaScript 中，对象是拥有属性和方法的数据。
</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//JavaScript 中的几乎所有事物都是对象：字符串、数字、数组、日期、函数，等等</span></span><br><span class="line"><span class="keyword">var</span> person=<span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">person.firstname=<span class="string">"Bill"</span>;</span><br><span class="line">person.hello = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="comment">//创建对象三种方式</span></span><br><span class="line"><span class="comment">// 1.字面量</span></span><br><span class="line"><span class="keyword">var</span> a = &#123;&#125;;</span><br><span class="line"><span class="comment">// 2.构造函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">book</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">new</span> book();</span><br><span class="line"><span class="comment">// 3.object</span></span><br><span class="line"><span class="keyword">var</span> obj = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br></pre></td></tr></table></figure>
<pre><code>* new操作符具体干了什么
* 1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
* 2、属性和方法被加入到 this 引用的对象中。
* 3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
</code></pre><ul>
<li>变量对象VO</li>
<li>先函数声明前置，然后在变量声明，JS解释器通过变量对象（Variable Object, VO)来获取。VO是一个抽象概念的“对象”，函数的VO分为两个阶段——变量初始化和代码执行。在变量初始化阶段，VO按照如下顺序填充：</li>
<li>1.函数参数(若未传入，初始化为undefined)</li>
<li>2.函数声明(发生命名冲突会覆盖)</li>
<li>3.变量声明(初始化为undefined, 发生命名冲突会忽略)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">a, b</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> c = <span class="number">10</span>;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">  <span class="keyword">var</span> e = <span class="function"><span class="keyword">function</span> <span class="title">_e</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">  (<span class="function"><span class="keyword">function</span> <span class="title">x</span>(<span class="params"></span>)</span>&#123;&#125;);</span><br><span class="line">  b = <span class="number">20</span>;</span><br><span class="line">&#125;</span><br><span class="line">test(<span class="number">10</span>);</span><br><span class="line"><span class="comment">//变量初始化阶段</span></span><br><span class="line">AO(test)=&#123;</span><br><span class="line">  a: <span class="number">10</span>,</span><br><span class="line">  b: <span class="literal">undefined</span>,</span><br><span class="line">  c: <span class="literal">undefined</span>,</span><br><span class="line">  d: &lt;ref to func "d"&gt;</span><br><span class="line">  e: undefined</span><br><span class="line">&#125;</span><br><span class="line">//代码执行阶段逐一赋值</span><br><span class="line">VO['c'] = 10;</span><br><span class="line">VO['e'] = function _e()&#123;&#125;</span><br><span class="line">VO['b'] = 20;</span><br><span class="line">//结果</span><br><span class="line">AO(test)=&#123;</span><br><span class="line">  a: 10,</span><br><span class="line">  b: 20,</span><br><span class="line">  c: 10,</span><br><span class="line">  d: &lt;reference  to FunctionDeclaration "d"&gt;</span><br><span class="line">  e: function _e()&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="JavaScript原型，原型链"><a href="#JavaScript原型，原型链" class="headerlink" title="JavaScript原型，原型链"></a>JavaScript原型，原型链</h4><ul>
<li><p>每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。</p>
</li>
<li><p>特点：</p>
</li>
<li><p>JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。</p>
</li>
</ul>
<h4 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h4><ul>
<li><p>闭包</p>
</li>
<li><p>在计算机科学中，闭包（Closure）是词法闭包（Lexical Closure）的简称，是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。</p>
</li>
<li><p>每次定义一个函数，都会产生一个作用域链（scope chain）。当JavaScript寻找变量varible时（这个过程称为变量解析），总会优先在当前作用域链的第一个对象中查找属性varible ，如果找到，则直接使用这个属性；否则，继续查找下一个对象的是否存在这个属性；这个过程会持续直至找到这个属性或者最终未找到引发错误为止。</p>
</li>
<li><p>所以，JavaScript中的所谓的高大上的闭包其实很简单，根本上还是变量解析。而之所以可以实现，还是因为变量解析会在作用域链中依次寻找对应属性的导致的。</p>
</li>
<li><p>就是一种允许函数向关联的父级作用域寻址的访问特权。</p>
</li>
<li><p>callee 与caller</p>
</li>
<li>callee返回正在执行的函数本身的引用，它是arguments的一个属性</li>
<li>1 这个属性只有在函数执行时才有效</li>
<li>2 它有一个length属性，可以用来获得形参的个数，因此可以用来比较形参和实参个数是否一致，即比较arguments.length是否等于arguments.callee.length</li>
<li>3 它可以用来递归匿名函数。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">alert(<span class="built_in">arguments</span>.callee);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>caller返回一个函数的引用，这个函数调用了当前的函数。</li>
<li>使用这个属性要注意:</li>
<li>1 这个属性只有当函数在执行时才有用</li>
<li>2 如果在JavaScript程序中，函数是由顶层调用的，则返回null</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">alert(a.caller);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> b = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">a();</span><br><span class="line">&#125;</span><br><span class="line">b();</span><br></pre></td></tr></table></figure>
<ul>
<li>Javascript作用链域</li>
<li>全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。</li>
</ul>
<p>当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，<br>直至全局函数，这种组织形式就是作用域链。</p>
<h4 id="ES6"><a href="#ES6" class="headerlink" title="ES6"></a>ES6</h4><h5 id="1-块级作用域"><a href="#1-块级作用域" class="headerlink" title="1.块级作用域"></a>1.块级作用域</h5><ul>
<li>let</li>
<li>const</li>
</ul>
<h5 id="2-字符串和正则表达式"><a href="#2-字符串和正则表达式" class="headerlink" title="2. 字符串和正则表达式"></a>2. 字符串和正则表达式</h5><p>utf-16码位<br>codePointAt()方法<br>String.fromCodePoint()<br>normalize()方法  提供unicode标准化形式</p>
<h5 id="模板字面量"><a href="#模板字面量" class="headerlink" title="模板字面量"></a>模板字面量</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//简化多行字符串</span></span><br><span class="line"><span class="keyword">let</span> m = <span class="string">`multi</span></span><br><span class="line"><span class="string">string`</span>;</span><br><span class="line"><span class="built_in">console</span>.log(m)</span><br><span class="line"><span class="comment">//字符串占位符</span></span><br><span class="line"><span class="keyword">let</span> name =<span class="string">'sss'</span>;</span><br><span class="line">meg = <span class="string">`hello, <span class="subst">$&#123;name&#125;</span>`</span>;</span><br><span class="line"><span class="built_in">console</span>.log(meg);</span><br></pre></td></tr></table></figure>
<h5 id="3-函数"><a href="#3-函数" class="headerlink" title="3.函数"></a>3.函数</h5><ul>
<li>形参默认值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//es5模拟</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">url</span>)</span>&#123;</span><br><span class="line">    url = url || <span class="string">'book/aa'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//es6默认参数值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">url=<span class="string">'bbb/ssss'</span></span>)</span>&#123;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//对arguments对象的影响</span></span><br><span class="line"><span class="comment">//es6中使用了默认值arguments对象和es5严格模式保持一致，不可被重新赋值</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">mix</span>(<span class="params">first,second=<span class="string">'b'</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(first===<span class="built_in">arguments</span>[<span class="number">0</span>])<span class="comment">//true</span></span><br><span class="line">    <span class="built_in">console</span>.log(second===<span class="built_in">arguments</span>[<span class="number">1</span>])<span class="comment">//false</span></span><br><span class="line">    first=<span class="string">'c'</span></span><br><span class="line">    second=<span class="string">'d'</span></span><br><span class="line">    <span class="built_in">console</span>.log(first===<span class="built_in">arguments</span>[<span class="number">0</span>])<span class="comment">//false</span></span><br><span class="line">    <span class="built_in">console</span>.log(second===<span class="built_in">arguments</span>[<span class="number">1</span>])<span class="comment">//false</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//默认参数表达式</span></span><br><span class="line"><span class="keyword">let</span> v= <span class="number">5</span>；</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getVal</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> v++;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first, second = getVal(</span>))</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> first + second;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>))</span><br><span class="line"><span class="comment">//另一种情况</span></span><br><span class="line"><span class="keyword">let</span> v= <span class="number">5</span>；</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getVal</span>(<span class="params">v</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> v+<span class="number">5</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first, second = getVal(first</span>))</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> first + second;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>))</span><br><span class="line"><span class="comment">//默认参数临时死区</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">first=second, second</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> first + second;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="number">1</span>,<span class="number">1</span>))</span><br><span class="line"><span class="built_in">console</span>.log(add(<span class="literal">undefined</span>,<span class="number">1</span>))</span><br></pre></td></tr></table></figure>
<h3 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h3><p>异步操作结果的占位符，让函数返回一个promise对象<br>生命周期<br>进行中pending，操作未完成它是unsettled的，操作结束promise则是已处理settled，<br>操作结束时，promise会进行到两个状态中的一个：<br>fulfilled 异步操作成功完成<br>rejected 由于程序错误，未能成功完成</p>
<h3 id="javsscript-框架"><a href="#javsscript-框架" class="headerlink" title="javsscript 框架"></a>javsscript 框架</h3><h3 id="React"><a href="#React" class="headerlink" title="React"></a>React</h3><p>理念：UI= render(data)<br>用户看到的界面是一个函数的执行结果，只接受数据作为参数。这个函数是一个纯函数，所谓纯函数指完全没有副作用，输出完全依赖输入的函数。<br>想要更新界面，要做的就是更新data，界面自然做出响应，react也是响应式编程的思想。</p>
<h4 id="virtual-DOM"><a href="#virtual-DOM" class="headerlink" title="virtual DOM"></a>virtual DOM</h4><p>对dom树的抽象。不会触及浏览器部分，只存在js空间的树结构，每次自上而下渲染react组件，会对比上次渲染的差异，然后修改真正的dom的差异部分。</p>
<h4 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h4><p>避免复杂的程序结构，开发者效率大大提高，代码维护性和可阅读性大大增强。数据驱动视图</p>
<h4 id="高质量的react组件"><a href="#高质量的react组件" class="headerlink" title="高质量的react组件"></a>高质量的react组件</h4><p>prop是组件对外接口，state是组件内部状态。<br>读取prop，super(props)，给this.props赋值是React.Component构造函数工作之一。<br>propType检查<br>React的state<br>在构造函数中对state初始化</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">constructor</span>(props)&#123;</span><br><span class="line">    <span class="keyword">this</span>.state=&#123;</span><br><span class="line">        count: props.initVal || <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>不要直接修改state而使用setState</p>
<h5 id="组件的生命周期"><a href="#组件的生命周期" class="headerlink" title="组件的生命周期"></a>组件的生命周期</h5><ul>
<li>装载 mount</li>
<li>更新 update</li>
<li>卸载 unmount</li>
</ul>
<p>装载过程<br>1.constructor<br>2.getInitialState//es6无createClass中存在<br>3.getDefaultProps//es6无createClass中存在<br>4.componentWillMount//操作可以放在constructor，只起到对称作用，在服务端可被调用<br>5.render//只返回jsx对象，由react决定如何渲染<br>6.componentDidMount//所有组件的render执行完成后才去执行didMount</p>
<p>更新过程<br>1.componentWillReceiveProps//父组件的render函数被调用，子组件会经历更新过程，不管传给子组件的props有木有改变，都会触发。setState不会触发<br>2.shouldComponentUpdate//决定一个组件什么时候不需要渲染，返回一个布尔值告诉react更新过程是否继续<br>3.ComponentWillUpdate<br>4.render<br>5.ComponentDidUpdate</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">shoundComponentUpdate(nextProps, nextState)&#123;</span><br><span class="line">    <span class="keyword">return</span> (nextProps.caption!==<span class="keyword">this</span>.props.caption) || (nextState.count!==<span class="keyword">this</span>.state.count)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>卸载过程<br>1.ComponentWillUnmount</p>
<p>局限性</p>
<p>子组件counter的count状态之后不一致，逻辑相同的状态放在不同组件会导致困局。react的state来存储状态缺点，数据的冗余和重复。</p>
<h2 id="redux"><a href="#redux" class="headerlink" title="redux"></a>redux</h2><h2 id="redux基本原则"><a href="#redux基本原则" class="headerlink" title="redux基本原则"></a>redux基本原则</h2><p>唯一数据源（也可以多个store但是无好处，store依赖关系，更新顺序带来新的问题）<br>保持状态只读（不能直接修改一个状态，而是需要通过action派发来完成）<br>数据改变只能通过纯函数完成（reducer函数完成规约所有元素的功能 reducer（state，action）得到新的state，reducer只计算不存储state）</p>
<p>-容器组件 和redux store打交道，读取store状态，状态变化更新组件状态，重新渲染组件，需要更新store状态，派发action（store状态转为傻瓜组件的prop mapStateToProps，傻瓜组件的动作转为派送给store的动作 mapDispatchToProps）<br>-傻瓜组件：根据当前props和state，渲染用户界面</p>
<h2 id="组件context"><a href="#组件context" class="headerlink" title="组件context"></a>组件context</h2><p>context提供了全局可访问对象，来传递store<br>一个树状组件上所有组件都能访问一个共同的对象，需要上级组件和下级组件配合。<br>Provider也是一个react组件，但他的render函数只是简单的把子组件渲染出来，不做任何附加的事情<br>react-redux库提供了<br>connect ： 连接容器组件和傻瓜组件<br>容器组件：1.把store上的状态转为内层傻瓜组件的prop，mapStateToProps 2.把内层傻瓜组件的用户动作转为派送给store的动作,mapDispatchToProps.<br>provider ： 提供了包含store的context</p>
<h2 id="react组件性能优化"><a href="#react组件性能优化" class="headerlink" title="react组件性能优化"></a>react组件性能优化</h2><p>1.单个组件的性能优化<br>定制shoundComponentUpdate函数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">shoundComponentUpdate(nextProps, nextState)&#123;</span><br><span class="line">    <span class="keyword">return</span> (nextProps.caption!==<span class="keyword">this</span>.props.caption) || (nextState.count!==<span class="keyword">this</span>.state.count)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>react-redux中：1.父组件传递给子组件的事件只指向同一个函数对象，以应对shoundComponentUpdate检查<br>2.父组件不给子组件传递函数类型的prop，由子组件自己搞定</p>
<p>`</p>
<p><todoitem key="{item.id}" id="{item.id}" text="{item.text}" conpleted="{item.completed}/"><br>const mapDispatchToProps = (dispatch, ownProps)=&gt;{<br>    const {id} = ownProps;<br>    return {<br>        onToggle: ()=&gt;dispatch(toggleTodo(id))<br>    }<br>}<br>`<br>1.多个组件的性能优化</todoitem></p>
<p>diff差异比对过程，两个数型结构虚拟dom比对，不是进行全部遍历比对O(n^3)次.而是层层比对O(n)次</p>
<p>节点不同的情况下先进行卸载过程，再进行装载和更新。所以不要轻易修改节点类型</p>
<p>多个子组件加上key属性，key必须是唯一且稳定不变的。</p>
<h2 id="react高级组件"><a href="#react高级组件" class="headerlink" title="react高级组件"></a>react高级组件</h2><p>1.高阶组件<br>HOC一个函数，接受一个组件作为输入，然后返回一个组件作为结果。返回的组件拥有输入组件不具有的功能。<br>高阶组件分为两类</p>
<ul>
<li>代理方式高阶组件</li>
<li>继承方式高阶组件</li>
</ul>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误
        
      </div>
    </a>
  
  
    <a href="/2016/08/28/使用Angularjs开发控制台类项目/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">使用Angularjs开发控制台类项目</div>
    </a>
  
</nav>

  


<div class="ds-thread" data-thread-key="2018/06/06/前端知识体系大全/"></div>

</article></section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>